<template>
	<div class='lbt'>
		<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
	    <!-- slides -->
	    <swiper-slide><img src="../../assets/images/course/guidance1.png" alt=""></swiper-slide>
	    <swiper-slide><img src="../../assets/images/course/guidance2.png" alt=""></swiper-slide>
	    <swiper-slide>
	    	<img src="../../assets/images/course/guidance3.png" alt="">
	    	<div class='go-experience'>
	    		<router-link to="/startpage" class='button'>立即体验</router-link>
	    	</div>

	    </swiper-slide >
	    <!-- Optional controls -->
	    <div class="swiper-pagination"  slot="pagination"></div>
	  </swiper>
	</div>
</template>
<script>
	import 'swiper/dist/css/swiper.css'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default{
		name:'Banner',
		data () {
	      return {
	        swiperOption: {
	          pagination: {
	            el: '.swiper-pagination'
	          }
	        },
					CousrseData:[]
	      }
	    },
		// mounted () {
    //     this.$axios.get(this.HOST +"/burning/guides")
    //     .then(res => {
    //         this.CousrseData = res.data.lbt
		// 				console.log(CousrseData)
    //     })
    //     .catch(error => {
    //         console.log(error)
    //     })
    // },
		components:{
			swiper,
			swiperSlide
		}
	}
</script>
<style lang="less" scoped>
.lbt{
	position: relative;
	img{
		width: 100%;
		height:100%;
	}
	.go-experience{
		width: 400/100rem;
		position: absolute;
		bottom: 300/100rem;
		left:170/100rem;
		text-align: center;
		padding: 20/100rem 0;
		background: rgb(254,218,5);
		font-size:36/100rem;
		.button{
			color:#171818;
		}
	}
}
</style>
